<!--
    http://dygraphs.com/tutorial.html

    加载csv文件，静态显示
-->
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="UTF-8">
        <title>Dygraph demo</title>
        <link rel="stylesheet" href="./css/dygraph.css" />
        <script src="./js/dygraph.js"></script>
       
        <!--
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.js"></script>
        -->

        <!-- chrome 报找不到dygraph.min.js.map 
            <script src="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.min.js"></script>
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.min.css" /> -->
    </head>

    <body>
        <h1>testing dygraph</h1>
        <div id="graphdiv"></div>
        <script>
            g = new Dygraph(
                document.getElementById("graphdiv"),
                // raw csv data or path to a csv file
                "Date,Temperature\n" +
                "2020-05-07,75\n" +
                "2020-05-08,70\n" +
                "2020-05-09,80\n"
            );
        </script>

        <div id="graphdiv2" style="width: 500px;height: 300px;"></div>
        <script>
            g2 = new Dygraph(
                document.getElementById("graphdiv2"),
                "data/temperatures.csv",
                {}
            );
            // 从csv header取得坐标Label； 
        </script>

        <div id="graphdiv3" style="width: 500px;height: 300px;"></div>
        <script>
            // 与graphdiv2相比，添了option; 意思貌似是显示 moving average，即每隔7天的平均值 ？？
            g2 = new Dygraph(
                document.getElementById("graphdiv3"),
                "data/temperatures.csv",
                {
                    rollPeriod: 7,
                    showRoller: true
                }
            );
        </script>

        <!-- graphdiv4 画的是errorBars，display error bars around data series； 为何叫errorBars ??-->
    </body>

    <script>
        const fetchData = () => {
            const data = []
            for (var i=1; i<=10; i+=1) {
                data.push(Math.random());
            }
        }

        const drawGraph = () => {
            let g;
            Promise.resolve(fetchData()).then(data => {
                g = new Dygraph(document.getElementById("div_g"), data, {
                    drawPoints: true,
                    title: 'bitcoin pricing',
                    titleHeigth: 32,
                    ylabel: 'Price',
                    xlabel: 'Date',
                    strokeWidth: 1.5,
                    labels: ['Date', 'Price'],
                });
            });
            window.setInterval(() => {
                console.log(Date.now());
                Promise.resolve(fetchData()).then(data => {
                    g.updateOptions({'file': data});
                });
            }, 1000);
        }
    </script>
</html>